<template>
  <div class="coupon-center">
    <BaseHeader></BaseHeader>
    <div class="content">
      <div>
        <div class="coupon-title">
          <router-link to="/">
            <img :src="$store.state.logoImg" alt="" width="120"/>
          </router-link>
          <p>{{ $t('coupon_center.center') }}</p>
          <Input
            :enter-button="$t('coupon_center.searcher')"
            :placeholder="$t('coupon_center.coupon')"
            search
            style="width: 400px"
            @on-search="search"
          />
        </div>

        <div class="fontsize_18 recommend">{{ $t('coupon_center.recommend') }}</div>

        <empty v-if="list.length === 0"/>
        <ul v-else class="coupon-list">
          <li v-for="(item, index) in list" :key="index" class="coupon-item">
            <div class="c-left">
              <div>
                <span
                  v-if="item.couponType === 'PRICE'"
                  class="fontsize_12 global_color"
                >HK$<span class="price">{{
                    item.price | unitPrice
                  }}</span></span
                >
                <span
                  v-if="item.couponType === 'DISCOUNT'"
                  class="fontsize_12 global_color"
                ><span class="price">{{ item.couponDiscount }}</span
                >{{ $t('coupon_center.discount') }}</span
                >
                <span class="describe"
                >{{ $t('coupon_center.full') }}{{ item.consumeThreshold }}{{ $t('coupon_center.can_use') }}</span
                >
              </div>
              <p>{{ $t('coupon_center.range') }}{{ useScope(item.scopeType, item.storeName) }}</p>
              <p>{{ $t('coupon_center.expiration') }}{{ item.endTime }}</p>
            </div>
            <b></b>
            <a class="c-right" @click="receive(item)">{{ $t('coupon_center.collect') }}</a>
            <i class="circle-top"></i>
            <i class="circle-bottom"></i>
          </li>
        </ul>
        <Page
          :page-size="params.pageSize"
          :total="total"
          class="pageration"
          show-sizer
          show-total
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
        >
        </Page>
      </div>
    </div>
    <BaseFooter></BaseFooter>
  </div>
</template>
<script>
import {couponList, receiveCoupon} from "@/api/member.js";
import i18n from "@/lang";
export default {
  i18n,
  data() {
    return {
      list: [], // 優惠碼列表
      total: 0, // 優惠碼总數
      params: {
        // 請求參數
        getType: "FREE",
        storeId: localStorage.getItem("storeId"),
        pageNumber: 1,
        pageSize: 20,
      },
    };
  },

  methods: {
    // 搜索優惠碼
    search(item) {
      this.params.couponName = item;
      this.params.pageNumber = 1;
      this.getList();
    },
    // 获取優惠碼列表
    getList() {
      this.$Spin.show();
      couponList(this.params)
        .then((res) => {
          this.$Spin.hide();
          this.loading = false;
          if (res.success) {
            this.list = res.result.records;
            this.total = res.result.total;
          }
        })
        .catch(() => {
          this.$Spin.hide();
        });
    },
    // 分頁 改变頁碼
    changePageNum(val) {
      this.params.pageNumber = val;
      this.getList();
    },
    // 分頁 改变每頁數
    changePageSize(val) {
      this.params.pageNumber = 1;
      this.params.pageSize = val;
      this.getList();
    },
    // 领取優惠碼
    receive(item) {
      receiveCoupon(item.id).then((res) => {
        if (res.success) {
          console.log(item);
          this.$Modal.confirm({
            title: "领取優惠碼",
            content: "<p>優惠碼领取成功，可到我的優惠碼頁面查看</p>",
            okText: "我的優惠碼",
            cancelText: "立即使用",
            closable: true,
            onOk: () => {
              this.$router.push("/home/Coupons");
            },
            onCancel: () => {
              this.$router.push({
                path: "/goodsList",
                query: {promotionsId: item.id, promotionType: "COUPON"},
              });
            },
          });
        }
      });
    },
    // 優惠碼可用范围
    useScope(type, storeName) {
      let shop = "平台";
      let goods = "全部商品";
      if (storeName !== "platform") shop = storeName;
      switch (type) {
        case "ALL":
          goods = "全部商品";
          break;
        case "PORTION_GOODS":
          goods = "部分商品";
          break;
        case "PORTION_GOODS_CATEGORY":
          goods = "部分分類商品";
          break;
      }
      return `${shop}${goods}可用`;
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
@import "../assets/styles/coupon.scss";

.content {
  width: 100%;
  background-color: #fff;

  > div {
    margin: 10px auto;
    width: 1200px;
  }
}

.coupon-title {
  display: flex;
  align-items: center;

  p {
    font-size: 18px;
    margin-right: 500px;
  }

  border-bottom: 2px solid $theme_color;
}

.recommend {
  margin: 20px auto;
  font-weight: bold;
  width: 200px;
  text-align: center;
}

.coupon-item {
  b {
    background: url("../assets/images/small-circle.png") top left repeat-y;
  }
}

.pageration {
  text-align: right;
  padding-bottom: 10px;
}
</style>
